<template>
	<view class="cart-container">
		<!-- 购物车为空时的显示 -->
		<view class="empty-cart" v-if="cartItems.length === 0">
			<view class="empty-icon">
				<view class="doc-icon">
					<view class="doc-body"></view>
					<view class="doc-search"></view>
					<view class="decorations">
						<view class="dot dot-1"></view>
						<view class="dot dot-2"></view>
						<view class="plus plus-1">+</view>
						<view class="plus plus-2">+</view>
						<view class="star star-1">✦</view>
					</view>
				</view>
			</view>
			<text class="empty-text">您的购物车有点寂寞</text>
			<view class="go-shopping-btn" @click="goToShop">
				<text class="go-shopping-text">去逛逛</text>
			</view>
		</view>

		<!-- 购物车商品 -->
		<view class="cart-item" v-for="item in cartItems" :key="item.id" v-if="cartItems.length > 0">
			<view class="item-left">
				<view class="checkbox" :class="{ 'checked': item.selected }" @click="toggleSelect(item.id)">
					<text v-if="item.selected" class="checkmark">✓</text>
				</view>
				<image class="product-image" :src="item.image" mode="aspectFill"></image>
			</view>
			<view class="item-content">
				<text class="product-name">{{ item.name }}</text>
				<text class="product-weight">{{ item.weight }}</text>
				<text class="product-price">¥ {{ item.price }}</text>
			</view>
			<view class="quantity-controls">
				<view class="quantity-btn" @click="decreaseQuantity(item.id)">−</view>
				<text class="quantity">{{ item.quantity }}</text>
				<view class="quantity-btn" @click="increaseQuantity(item.id)">+</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="recommend-section">
			<text class="section-title">猜你喜欢</text>
			<scroll-view class="recommend-scroll" scroll-x="true">
				<view class="recommend-items">
					<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index">
						<image class="recommend-image" :src="item.image" mode="aspectFill"></image>
						<text class="recommend-name">{{ item.name }}</text>
						<text class="recommend-price">¥ {{ item.price }}</text>
						<view class="add-btn" @click="addToCart(item)">+</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部结算栏 -->
		<view class="bottom-bar" v-if="cartItems.length > 0">
			<view class="total-info">
				<text class="total-text">应付合计 <text class="total-price">¥{{ totalPrice }}</text></text>
				<text class="shipping">运费 ¥0</text>
			</view>
			<view class="checkout-btn" @click="goToCheckout">
				去结算(¥{{ totalPrice }})
			</view>
		</view>
		
		<!-- 确认删除弹窗 -->
		<view class="modal-overlay" v-if="showDeleteModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<text class="modal-title">温馨提示</text>
				<text class="modal-message">确定不要这个了吗?</text>
				<view class="modal-buttons">
					<view class="modal-btn cancel" @click="closeModal">取消</view>
					<view class="modal-btn confirm" @click="confirmDelete">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		calculateTotal, 
		formatPrice, 
		showCartToast, 
		showConfirmDialog,
		saveCartToStorage,
		loadCartFromStorage
	} from '@/utils/cart.js';

	export default {
		data() {
			return {
				cartItems: [
					// 测试时可以将这里置空来查看空状态效果
				],
				showDeleteModal: false,
				deleteItemId: null,
				recommendItems: [
					{
						id: 2,
						name: '厕所清洁剂',
						price: 2,
						image: '/static/images/厕所清洁剂.png'
					},
					{
						id: 3,
						name: '华力蚊香',
						price: 10,
						image: '/static/images/蚊香.png'
					},
					{
						id: 4,
						name: '佳洁士牙膏',
						price: 5,
						image: '/static/images/牙膏.png'
					},
					{
						id: 5,
						name: '500g±50g/份|...',
						price: 4.99,
						image: '/static/images/placeholder.svg'
					},
					{
						id: 6,
						name: '【新鲜】韭菜...',
						price: 0.01,
						image: '/static/images/placeholder.svg'
					},
					{
						id: 7,
						name: '【新鲜】本地水...',
						price: 6.8,
						image: '/static/images/placeholder.svg'
					}
				]
			}
		},
		computed: {
			totalPrice() {
				return calculateTotal(this.cartItems);
			},
			totalQuantity() {
				return this.cartItems.reduce((total, item) => total + item.quantity, 0);
			}
		},
		onLoad() {
			// 加载购物车数据
			const savedCart = loadCartFromStorage();
			if (savedCart.length > 0) {
				this.cartItems = savedCart;
			}
		},
		methods: {
			// 跳转到商城页面
			goToShop() {
				uni.switchTab({
					url: '/pages/pointsMall/pointsMall'  // 根据您的实际页面路径调整
				});
			},
			toggleSelect(itemId) {
				this.cartItems = this.cartItems.map(item => 
					item.id === itemId 
						? { ...item, selected: !item.selected }
						: item
				);
				this.saveCart();
			},
			increaseQuantity(itemId) {
				this.cartItems = this.cartItems.map(item => 
					item.id === itemId 
						? { ...item, quantity: item.quantity + 1 }
						: item
				);
				this.saveCart();
			},
			decreaseQuantity(itemId) {
				const item = this.cartItems.find(item => item.id === itemId);
				if (item.quantity > 1) {
					this.cartItems = this.cartItems.map(item => 
						item.id === itemId 
							? { ...item, quantity: item.quantity - 1 }
							: item
					);
					this.saveCart();
				} else {
					this.deleteItemId = itemId;
					this.showDeleteModal = true;
				}
			},
			addToCart(item) {
				const existingItem = this.cartItems.find(cartItem => cartItem.id === item.id);
				
				if (existingItem) {
					this.cartItems = this.cartItems.map(cartItem => 
						cartItem.id === item.id 
							? { ...cartItem, quantity: cartItem.quantity + 1 }
							: cartItem
					);
				} else {
					this.cartItems.push({
						...item,
						quantity: 1,
						selected: true,
						weight: '1份'
					});
				}
				
				this.saveCart();
				showCartToast('已添加到购物车', 'success');
			},
			goToCheckout() {
				const selectedItems = this.cartItems.filter(item => item.selected);
				if (selectedItems.length === 0) {
					showCartToast('请选择要结算的商品', 'none');
					return;
				}
				
				// showCartToast('跳转到结算页面', 'none');
				uni.navigateTo({
					url:"/pages/ConfirmOrder/ConfirmOrder"
				})
			},
			closeModal() {
				this.showDeleteModal = false;
				this.deleteItemId = null;
			},
			async confirmDelete() {
				if (this.deleteItemId) {
					this.cartItems = this.cartItems.filter(item => item.id !== this.deleteItemId);
					this.saveCart();
					showCartToast('商品已删除', 'success');
				}
				this.closeModal();
			},
			saveCart() {
				saveCartToStorage(this.cartItems);
			}
		}
	}
</script>

<style scoped>
	.cart-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 空购物车样式 */
	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 60rpx 100rpx;
	}

	.empty-icon {
		position: relative;
		margin-bottom: 60rpx;
	}

	.doc-icon {
		position: relative;
		width: 160rpx;
		height: 160rpx;
	}

	.doc-body {
		width: 120rpx;
		height: 140rpx;
		background-color: #e8e8e8;
		border-radius: 8rpx;
		position: relative;
		margin: 10rpx auto;
	}

	.doc-body::before {
		content: '';
		position: absolute;
		top: 20rpx;
		left: 15rpx;
		right: 15rpx;
		height: 4rpx;
		background-color: #bbb;
		border-radius: 2rpx;
	}

	.doc-body::after {
		content: '';
		position: absolute;
		top: 35rpx;
		left: 15rpx;
		width: 60rpx;
		height: 4rpx;
		background-color: #bbb;
		border-radius: 2rpx;
	}

	.doc-search {
		position: absolute;
		bottom: 15rpx;
		right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #999;
		border-radius: 50%;
		background-color: transparent;
	}

	.doc-search::after {
		content: '';
		position: absolute;
		bottom: -15rpx;
		right: -8rpx;
		width: 4rpx;
		height: 20rpx;
		background-color: #999;
		border-radius: 2rpx;
		transform: rotate(45deg);
	}

	.decorations {
		position: absolute;
		top: -20rpx;
		left: -20rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.dot {
		position: absolute;
		width: 8rpx;
		height: 8rpx;
		background-color: #ccc;
		border-radius: 50%;
	}

	.dot-1 {
		top: 20rpx;
		left: 30rpx;
	}

	.dot-2 {
		bottom: 30rpx;
		right: 40rpx;
	}

	.plus {
		position: absolute;
		color: #ccc;
		font-size: 24rpx;
		font-weight: bold;
	}

	.plus-1 {
		top: 10rpx;
		right: 50rpx;
	}

	.plus-2 {
		bottom: 10rpx;
		left: 20rpx;
	}

	.star {
		position: absolute;
		color: #ccc;
		font-size: 20rpx;
	}

	.star-1 {
		top: 50rpx;
		left: 10rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 80rpx;
	}

	.go-shopping-btn {
		background-color: #1976d2;
		border-radius: 50rpx;
		padding: 25rpx 80rpx;
	}

	.go-shopping-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 其他原有样式保持不变 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.header-icons {
		display: flex;
		gap: 20rpx;
	}

	.icon-item {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
	}

	.cart-item {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.item-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		background-color: #007aff;
		border-color: #007aff;
	}

	.checkmark {
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}

	.product-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		background-color: #f0f0f0;
	}

	.item-content {
		flex: 1;
		margin-left: 20rpx;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.product-weight {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff6b35;
		font-weight: bold;
		display: block;
	}

	.quantity-controls {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.quantity-btn {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #007aff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.quantity {
		font-size: 28rpx;
		color: #333;
		min-width: 40rpx;
		text-align: center;
	}

	.recommend-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.recommend-scroll {
		white-space: nowrap;
	}

	.recommend-items {
		display: flex;
		gap: 20rpx;
	}

	.recommend-item {
		width: 200rpx;
		flex-shrink: 0;
		position: relative;
	}

	.recommend-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		background-color: #f0f0f0;
		margin-bottom: 10rpx;
	}

	.recommend-name {
		font-size: 24rpx;
		color: #333;
		display: block;
		margin-bottom: 5rpx;
		white-space: normal;
		line-height: 1.2;
	}

	.recommend-price {
		font-size: 26rpx;
		color: #ff6b35;
		font-weight: bold;
		display: block;
	}

	.add-btn {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #007aff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
	}

	.bottom-bar {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.total-info {
		display: flex;
		flex-direction: column;
	}

	.total-text {
		font-size: 28rpx;
		color: #333;
	}

	.total-price {
		font-weight: bold;
		color: #ff6b35;
	}

	.shipping {
		font-size: 24rpx;
		color: #666;
		margin-top: 5rpx;
	}

	.checkout-btn {
		background-color: #007aff;
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 40rpx;
		width: 80%;
		max-width: 500rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.modal-message {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.modal-buttons {
		display: flex;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		padding: 20rpx;
		border-radius: 8rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.modal-btn.cancel {
		background-color: #f0f0f0;
		color: #666;
	}

	.modal-btn.confirm {
		background-color: #4caf50;
		color: #fff;
	}
</style>